<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 引入样式 -->
    <script src="../../js/vue.js"></script>
    <script src="../../js/axios.min.js"></script>
    <script src="../../js/dayjs.min.js"></script>
    <link rel="stylesheet" href="../../plugins/element_UI/index.css">
    <script src="../../plugins/element_UI/index.js"></script>
</head>
<body>
<style>
    .el-table .warning-row {
        background: #F5DEB3;
    }
    .el-table .success-row {
        background: #f0f9eb;
    }
    .el-table .vip-row {
        background: #f9c855;
    }
    .el-date-editor--daterange.el-input, .el-date-editor--daterange.el-input__inner, .el-date-editor--timerange.el-input, .el-date-editor--timerange.el-input__inner {
        width: 225px;
    }

    .el-input__inner {
        -webkit-appearance: none;
        background-color: #FFF;
        background-image: none;
        border-radius: 4px;
        border: 1px solid #DCDFE6;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        font-size: inherit;
        height: 32px;
        line-height: 40px;
        outline: 0;
        padding: 0 15px;
        -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
        transition: border-color .2s cubic-bezier(.645,.045,.355,1);
        width: 100%;
    }
    .el-table .cell {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        word-break: break-all;
        line-height: 15px;
        padding-right: 0px;
    }
    #page {
        height: 40px;
        line-height: 40px;
        position: fixed;
        bottom: 34px;
        width: 100%;
        text-align: start;
        /*background: #393D49;*/
        color: #fff;
        font-family: Arial;
        font-size: 12px;
        letter-spacing: 1px;
    }
</style>
<div id="app">
    <el-row class="el-search-row-d" style="margin-right: auto">
        <el-input
                placeholder="姓名模糊查询"
                v-model="patName"
                style="width: fit-content"
                @change="init"
                @keyup.native="chinese"
                clearable>
        </el-input>
        <el-button size="small" type="primary" @click="init">检索</el-button>
<!--        <el-button type="small" @click="extractHisData">抽取医生数据</el-button>-->
    </el-row>

    <el-dialog title="预约记录" :visible.sync="appDialogTableVisible" width="70%"  >
        <el-table :data="appointmentList"
                  :row-class-name="chrildTableRowClassName"
                  max-height="600" >
            <el-table-column
                    fixed
                    type="index"
                    width="50">
            </el-table-column>
            <el-table-column
                    fixed
                    prop="patName"
                    label="患者姓名"
                    width="100">
            </el-table-column>

            <el-table-column
                    prop="createDate"
                    label="预约时间"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="visitDate"
                    label="就诊时间"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="appStatusWrapper"
                    label="预约状态"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="serialNumber"
                    label="号源编号"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="timeState"
                    label="上下午"
                    :formatter="formatterTimeState"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="depName"
                    label="科室名称"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="doctorName"
                    label="医生姓名"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="spName"
                    label="服务商"
                    :formatter="formatterSpName"
                    width="120">
            </el-table-column>
        </el-table>
    </el-dialog>

    <template>
        <el-table
                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName"
                :max-height="tableHeight"
                border
                ref="table"
                size="mini">
            <el-table-column
                    fixed
                    type="index"
                    width="50">
            </el-table-column>
            <el-table-column
                    fixed
                    prop="patName"
                    label="姓名"
                    align="center"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="patMemGrade"
                    :formatter="formatterPatMemGrade"
                    label="患者类型"
                    align="center"
                    width="80">
            </el-table-column>

            <el-table-column
                    prop="patPhone"
                    align="center"
                    label="联系电话"
                    width="120">
            </el-table-column>
<!--            <el-table-column-->
<!--                    align="center"-->
<!--                    prop="grade"-->
<!--                    label="信誉分"-->
<!--                    width="120">-->
<!--            </el-table-column>-->
<!--            <el-table-column-->
<!--                    align="center"-->
<!--                    prop="timeStamp"-->
<!--                    label="上次预约时间"-->
<!--                    width="120">-->
<!--            </el-table-column>-->

            <el-table-column
                    align="center"
                    label="操作"
                    width="180">
                <template slot-scope="scope">
                    <el-button
                               @click.native.prevent="changeRow(scope.$index,scope.row)"
                               type="text"
                               size="small">
                        <p v-if="scope.row.patMemGrade=='0' || scope.row.patMemGrade==null ">
                            设为VIP
                        </p>
                        <p v-else>
                            设为普通
                        </p>
                    </el-button>
                    <el-button
                               @click.native.prevent="aClick(scope.$index,scope.row)"
                               type="text"
                               size="small">个人详情
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <div id="page">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentPageChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 15, 30]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
</div>
</body>
<script>
    let app = new Vue({
        el: '#app',
        data() {
            return {
                tableData: [],
                currentPage: 1,
                pageSize:  15,
                totalPage: 1,
                total:1000,
                scrollDistance:0,
                hospitalId: JSON.parse(localStorage.getItem("user")).hospitalId ,
                patName: "",
                patId:'',
                tableHeight: 250,
                status: 0,
                loading: false,
                currentUpRow: null,
                hospitals: [],
                departments: [],
                bindInfos: [],
                hospitals:'',
                doctors: [],
                ruleForm: {
                    age: null,
                    blacklistReasons: null,
                    dataSource: null,
                    feeId: null,
                    feeName: null,
                    grade: 100,
                    id: null,
                    patBirthday: null,
                    patCardNum: null,
                    patCertifiNum: null,
                    patCertifiType: null,
                    patCountry: null,
                    patFamAddress: null,
                    patIdentityNum: null,
                    patMatrimony: null,
                    patMemGrade: null,
                    patName: null,
                    patNationality: null,
                    patOperation: null,
                    patPhone: null,
                    patPostcode: null,
                    patRecordDate: null,
                    patSex: null,
                    patWorkUnit: null,
                    timeStamp: null
                },
                rules: {
                    clinicAddress: [
                        {required: true, message: '请输入医院名称', trigger: 'blur'},
                        {min: 3, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur'}
                    ]
                },
                appointmentList:[],
                gridData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }],
                dialogTableVisible: false,
                dialogFormVisible: false,
                appDialogTableVisible:false,
                formLabelWidth: '120px'
            }
        },
        methods: {
            lazyLoad() {
                //当前页自增长
                let params = [{name:'hospitalId', value:this.hospitalId},{name:'patName', value:this.patName}]
                axios.post("http://" + window.location.host + '/pubPatients/select_list_Page',
                    {"pageNum":this.currentPage,"pageSize":this.pageSize,"params":params}
                ).then(res => {
                    //将请求回来的数据和当前展示的数据合并在一起
                    this.tableData =res.data.data.content;
                }).catch((error) => {
                    this.$message({
                        type: 'success',
                        message: error.response.data.message
                    });
                });
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize=val;
            },
            handleCurrentPageChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage=val;
                this.lazyLoad()
            },
            chinese:function(){
                this.patName=this.patName.replace(/[^\u4E00-\u9FA5]/g, '');
            },
            init: function () {
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                let that = this
                that.loading = false
                that.currentPage=1
                let params = [{name:'id', value:this.patId},{name:'hospitalId', value:this.hospitalId},{name:'patName', value:this.patName}]
                axios.post("http://" + window.location.host + '/pubPatients/select_list_Page',
                    {"pageNum":that.currentPage,"pageSize":this.pageSize,"params":params}
                    ).then(res => {
                    that.tableData = res.data.data.content;
                    that.totalPage = res.data.data.totalPage
                    this.total = res.data.data.totalSize
                    loading.close()
                }).catch((error) => {
                    this.$message({
                        type: 'success',
                        message: error.response.data.message
                    });
                    loading.close()
                });
                axios.post("http://"+window.location.host+'/hospital/select_list', {
                    hosName: ''
                }).then(res => {
                    console.log(res)
                    that.hospitals = res.data.data;
                }).catch((e) => {
                    alert('获取数据失败');
                });
            },
            extractHisData: function(){
                axios.post("http://" + window.location.host + '/pubPatients/extractHisData', {}).then(res => {
                    this.$message({
                        showClose: true,
                        type: 'success',
                        message: "获取科室信息成功！"
                    });
                }).catch((error) => {
                    this.$message({
                        showClose: true,
                        type: 'error',
                        message:  error.response.data.message
                    });
                });
            },
            aClick(index,row) {
                let patId = row.id
                location.href = `../patients/detail.html?patId=${patId}`
            },
            closeDiglog: function () {
                this.ruleForm = {
                    age: null,
                    blacklistReasons: null,
                    dataSource: null,
                    feeId: null,
                    feeName: null,
                    grade: 100,
                    id: null,
                    patBirthday: null,
                    patCardNum: null,
                    patCertifiNum: null,
                    patCertifiType: null,
                    patCountry: null,
                    patFamAddress: null,
                    patIdentityNum: null,
                    patMatrimony: null,
                    patMemGrade: null,
                    patName: null,
                    patNationality: null,
                    patOperation: null,
                    patPhone: null,
                    patPostcode: null,
                    patRecordDate: null,
                    patSex: null,
                    patWorkUnit: null,
                    timeStamp: null
                }
            },
            handleCurrentChange(val) {
                this.currentUpRow = val;
                axios.get("http://"+window.location.host+'/ordAppointment/selectListByPatId?patId='+val.id).then(res => {
                    this.appointmentList = res.data.data;
                    if(res.data.data.length>0){
                        this.appDialogTableVisible=true;
                    }else {
                        alert('暂无订单');
                    }
                }).catch((e) => {
                    alert('暂无订单');
                });
            },
            formatterHospital:function(row, column){
                for(let i=0;i<this.hospitals.length;i++){
                    if (row.hospitalId==this.hospitals[i].id){
                        return this.hospitals[i].hosName
                    }
                }
            },
            formatterPatMemGrade:function(row, column){
                if (row.patMemGrade == 1 || row.patMemGrade== '1'){
                    return "VIP"
                }else if (row.patMemGrade == 0 || row.patMemGrade=='0'){
                    return "普通"
                }else{
                    return "普通"
                }
            },
            formatterSex:function(row, column){
                if (row.patSex == 1 || row.patSex== '1'){
                    return "男"
                }else if (row.patSex == 0 || row.patSex=='0'){
                    return "女"
                }else{
                    return "其他"
                }
            },
            formatterSpName: function(row, column){
                if (row.spName == 'jkt' ) {
                    return "健康通"
                } else if (row.spName ==  'weixin' ) {
                    return "微信"
                } else if (row.spName == 'alipay') {
                    return "支付宝"
                }else if (row.spName == 'weibo') {
                    return "微博"
                }else if (row.spName == 'dy') {
                    return "抖音"
                }else {
                    return row.spName
                }
            },
            formatterAppStatus: function(row, column){
                console.log(row.appStatus)
                let appStatus=""
                switch (row.appStatus) {
                    case 0:
                        appStatus="预约";
                        break;
                    case 1:
                        appStatus="过期未取号";
                        break;
                    case 2:
                        appStatus="已取号";
                        break;
                    case 3:
                        appStatus="患者取消";
                        break;
                    default:
                        appStatus = "未知";
                }
                return appStatus;
            },
            formatterTimeState: function(row, column){
                let timeState=""
                switch (row.timeState) {
                    case 0:
                        timeState="上午";
                        break;
                    case 1:
                        timeState="下午";
                        break;
                    case 2:
                        timeState="夜门诊";
                        break;
                    default:
                        timeState = "未知";
                }
                return timeState;
            },
            submitForm: function (ruleForm) {
                this.$refs[ruleForm].validate((valid) => {
                    if (valid) {
                        let URL=""
                        if (this.ruleForm.id){
                            URL='/pubPatients/update_by_primary_key_selective'
                        }else {
                            URL='/pubPatients/create'
                        }
                        axios.post("http://" + window.location.host + URL, this.ruleForm).then(res => {
                            this.$message({
                                type: 'success',
                                message: '创建成功!'
                            });
                            this.dialogFormVisible = false
                        }).catch(function (error) {
                            this.$message({
                                type: 'success',
                                message: error.response.data.message
                            });
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            deleteRow: function (index, row) {
                console.log("row",row)
                let params = new URLSearchParams()
                params.append("id", row.id)
                this.confirm("强制删除数据", '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(() => {
                    params.append("sd",value);
                    axios.post("http://" + window.location.host + '/pubPatients/delete_by_primary_key',
                        params
                    ).then(res => {
                        this.$message({
                            type: 'success',
                            message: '成功!'
                        });
                        this.tableData.splice(index, 1);
                    }).catch((error) => {
                        console.log(error)
                        this.$message({
                            type: 'error',
                            message: error.response.data.message
                        });
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消删除！！'
                    });
                });
            },
            editRow: function (index, row) {
                this.handleCurrentChange(row)
                this.ruleForm = row;
                console.log(this.ruleForm)
            },
            changeRow: function (index, row) {
                if (row.patMemGrade==null){
                    row.patMemGrade='0'
                }
                let patMemGrade = row.patMemGrade=='0'?'1':'0'
                axios.post("http://" + window.location.host + '/pubPatients/update_by_primary_key_selective',
                    {'id':row.id,'patMemGrade':patMemGrade}
                ).then(res => {
                    this.init();
                })
            },
            //设置指定行、列、具体单元格颜色
            tableRowClassName({row, rowIndex}) {
                if (row.status == "1" ||  row.status == 1) {
                    if (row.patMemGrade == "1" ||  row.patMemGrade == 1) { //指定坐标rowIndex ：行，columnIndex ：列
                        return 'success-row';
                    }else {
                        return 'warning-row';
                    }
                }else {
                    if (row.patMemGrade == "1" ||  row.patMemGrade == 1) { //指定坐标rowIndex ：行，columnIndex ：列
                        return 'vip-row';
                    }else {
                        return ''
                    }
                }
            },
            getPageParam(param) {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i=0;i<vars.length;i++) {
                    var pair = vars[i].split("=");
                    if(pair[0] == param){return pair[1];}
                }
                return '';
            },
            //预约状态(0已预约 1已过期 2已取号 3患者取消 4医生停诊 5后台取消)
            chrildTableRowClassName({row, rowIndex}) {
                console.log(row)
                if (row.appStatus == 1 || row.appStatus == '1') {
                    return 'warning-row';
                } else if (row.appStatus == 2 || row.appStatus == '2') {
                    return 'success-row';
                }else if (row.appStatus == 3 || row.appStatus == '3') {
                    return 'vip-row';
                }else if (row.appStatus == 4 || row.appStatus == '4') {
                    return '';
                }
            }
        },
        watch:{
            patName: function (newValue,oldValue) {
                // 0. 刷新后重置滚动距离
                this.$tableDom.scrollTop = 0
                this.init();
            },
            pageSize:function (newValue, oldValue) {
                this.lazyLoad()
            },
        },
        created() {
            this.patId = this.getPageParam("patId")
            this.init()
        },
        mounted:function(){
            this.$nextTick(function () {
                this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 80;
                // 监听窗口大小变化
                let self = this;
                window.onresize = function() {
                    self.tableHeight = window.innerHeight - self.$refs.table.$el.offsetTop - 80
                }
            })
            //this.$refs.table.$el.offsetTop：表格距离浏览器的高度
            //100表示你想要调整的表格距离底部的高度（你可以自己随意调整），因为我们一般都有放分页组件的，所以需要给它留一个高度　
        }
    });
</script>

</html>
